<template>
	<!-- 结婚补助 -->
	<view class="page-main">
		<view>
			<up-steps :current="active" activeColor="#d81e06">
				<up-steps-item v-for="(item,index) in stepList" :key="index" :title="item.title" :iconSize="28"></up-steps-item>
			</up-steps>
		</view>
		<!-- 表单 -->
		<view class="form_view">
			<up-form
					labelPosition="left"
					:model="model1"
					:rules="rules"
					ref="form"
			>
				<view v-show="active == 0">
					<view class="padding-view">
						<up-form-item
								label="会员姓名"
								prop="userInfo.realName"
								borderBottom
								labelWidth="80px"
						>
							<up-input
									v-model="memberData.userInfo.realName"
									border="none"
									placeholder="请输入"
									readonly="true"
							></up-input>
						</up-form-item>
						<up-form-item
								label="性别"
								prop="userInfo.gender"
								borderBottom
								@click="showSex = true;"
								labelWidth="80px"
						>
							<input
							      :value="memberData.userInfo.gender === 0 ? '男' : '女'"
							      disabled
							      placeholder="请选择"
							      style="border: none;"
							    />
							<!-- <template #right>
								<up-icon
									name="arrow-right"
								></up-icon>
							</template> -->
						</up-form-item>
						<up-form-item
								label="出生日期"
								prop="userInfo.birthday"
								borderBottom
								labelWidth="80px"
						>
							<up-input
									v-model="memberData.userInfo.birthday"
									border="none"
									placeholder="请输入"
									readonly="true"
							></up-input>
						</up-form-item>
						
						<up-form-item
								label="手机号"
								prop="userInfo.mobile"
								borderBottom
								labelWidth="80px"
						>
							<up-input
									v-model="memberData.userInfo.mobile"
									border="none"
									placeholder="请输入"
									readonly="true"
							></up-input>
						</up-form-item>
						<up-form-item
								label="会员所在单位全称"
								prop="userInfo.orgName"
								borderBottom
								labelWidth="140px"
						>
							<up-input
									v-model="memberData.userInfo.orgName"
									border="none"
									placeholder="请输入"
									readonly="true"
							></up-input>
						</up-form-item>
					</view>
				</view>
				<view v-show="active == 1">
					<view class="padding-view">
						<up-form-item
								label="结婚日期"
								prop="userInfo.weddingDate"
								borderBottom
								@click="showDate = true;"
								labelWidth="80px"
						>
							<up-input
								v-model="model1.userInfo.weddingDate"
								disabled
								disabledColor="#ffffff"
								placeholder="请选择"
								border="none"
							></up-input>
							<template #right>
								<up-icon
									name="arrow-right"
								></up-icon>
							</template>
						</up-form-item>
						<up-form-item
								label="附件上传"
								prop="userInfo.attachment"
								borderBottom
								labelWidth="80px"
						>
							<up-input
								v-model="model1.userInfo.attachment"
								disabled
								disabledColor="#ffffff"
								placeholder="结婚证"
								border="none"
							></up-input>
							<template #right>
								<up-upload
									:fileList="model1.userInfo.fileList"
									:maxCount="3"
									@afterRead="afterRead"
								>
									<button size="mini" class="file-btn">上传</button>
								</up-upload>
							</template>
						</up-form-item>
						<up-form-item
								label="备注"
								prop="userInfo.remark"
								borderBottom
								labelWidth="80px"
								labelPosition="top"
						>
							<up-textarea v-model="model1.userInfo.remark" placeholder="请输入" count :maxlength="300"></up-textarea>
						</up-form-item>
					</view>
				</view>
			</up-form>
			<up-action-sheet
					:show="showSex"
					:actions="actions"
					title="请选择性别"
					@close="showSex = false"
					@select="sexSelect"
			>
			</up-action-sheet>
			<up-datetime-picker
				ref="datetimePickerRef"
				@close="showDate=false" 
				@confirm="confirm"
				:show="showDate"
				v-model="dateValue"
				mode="date"
				:formatter="formatter"
			></up-datetime-picker>
			
		</view>
		<view class="submit-btn">
			<button size="mini" v-if="active == 0" class="btn" @click="change">
				确认无误，下一步
			</button>
			<button size="mini" v-if="active == 1" class="btn" @click="submit">
				提交申请
			</button>
			<button size="mini" v-if="active == 2" class="btn" @click="goBack">返回</button>
		</view>
		
	</view>
</template>

<script>
	import {memberUserApi} from '@/api/member/member-uer-api.js'
	import {applyApi} from '@/api/needy/needy-apply-api.js';
	import { uploadRequest } from '@/utils/request.js';
	export default {
		data() {
			return {
				active: 0,
				stepList: [{
					title: '填写个人信息'
				}, {
					title: '填写结婚信息'
				}, {
					title: '审核'
				}],
				
				showSex: false,
				memberData: {
					userInfo: { 
						realName: '',
						gender: 0,  
						birthday: '',
						idNumber: '',
						mobile: '',
						orgName: '',

					},  
				},
				model1: {  
				    userInfo: {  
				      difficultyType:3,
					  weddingDate: '',
					  remark: '',
					  attachment: [],
					  fileList: []
				    },  
				},  
				actions: [  
				    { name: '男' },  
				    { name: '女' },  
				    // { name: '保密' },  
				],  
				rules: {  
				    'userInfo.weddingDate': {  
				      type: 'string',  
				      required: true,  
				      message: '请选择结婚日期',  
				      trigger: ['blur', 'change'],  
				    },  
				    
				},
				dateValue: Date.now(),
				showDate: false,
				defaultTimeIndex: []
			}
		},
		onLoad() {
			this.getLoginMember();
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			//点击步骤
			change() {
				if (this.active < this.stepList.length - 1) {
					this.active += 1
				} 
			},
			submit(){
				this.$refs.form.validate().then(res=>{
					this.model1.userInfo.difficultyType = 3;
					applyApi.save(this.model1.userInfo).then(res=>{
						this.active += 1
					})
				}).catch(error=>{
					console.log('error:',error);
				})
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			sexSelect(e) {  
			  this.model1.userInfo.sex = e.name;  
			  // if (formRef.value) {  
			  //   formRef.value.validateField('userInfo.sex');  
			  // }  
			},
			formatDate(date) {
				const pad = (num) => (num < 10 ? '0' + num : num);
	
				const year = date.getFullYear();
				const month = pad(date.getMonth() + 1);
				const day = pad(date.getDate());
	
				return `${year}-${month}-${day}`;
			},

			confirm(e) {
				const date = new Date(e.value);
				this.model1.userInfo.weddingDate = this.formatDate(date)
				this.showDate = false
			},
			async getLoginMember(){
				const result = await memberUserApi.getLoginMemberInfo();
				Object.assign(this.memberData.userInfo, result.data);
			},
			async afterRead(event){
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				  let lists = [].concat(event.file);
				  let fileListLen = this.model1.userInfo.fileList.length;
				  lists.map((item) => {
				    this.model1.userInfo.fileList.push({
				      ...item,
				      status: 'uploading',
				      message: '上传中',
				    });
				  });
				  
				for (let i = 0; i < lists.length; i++) {
				  const result = await uploadRequest(lists[i].url);
				  const url = result.data.url;
				  this.model1.userInfo.attachment.push(url);
				  let item = this.model1.userInfo.fileList[fileListLen];
				  this.model1.userInfo.fileList.splice(fileListLen, 1, {
					...item,
					status: 'success',
					message: '',
					url: url,
				  });
				  fileListLen++;
				}
			}
		}
	}
</script>
